'use strict';
import React, {PropTypes} from 'react';
import {
    View,
    Image,
    Text,
    TouchableOpacity,
    StyleSheet,
    Platform,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import PanoramaPage from '../Pages/PanoramaPage';
var {NativeModules} = require('react-native');
const styles = StyleSheet.create({
    vpTitle: {
        fontSize: 20,
        color: 'white',
        marginRight: 10,
    },
    vpSubtitle: {
        fontSize: 14,
        color: 'white',
    },
    icon30: {
        width: 30,
        height: 30,
        borderRadius: 15,
    }
});

class Foreground extends React.Component {

    playVideo(videoUrl){
         console.log(videoUrl);
          if (Platform.OS === 'android'){
               NativeModules.VideoPlayerModule.videoPlay(videoUrl);
            }

         if (Platform.OS === 'ios'){
             NativeModules.VideoPlay.paly(videoUrl).
                                then((results) =>{
                                     console.log('成功'+results);
                                 }).catch((error)=>{
                                     console.log('失败'+error);
                                    });
         }
    }

    render() {
        let {
            height,
            introduce,
            Component,
            renderHeader,
            size,
            show720,
            showVideo,
            showLive,
        } = this.props;
        return (
            <View style={{height, width:Global.Const.size.width}}>
                {renderHeader()}
                <View style={{width:50,position: 'absolute',bottom:180, right:0}}>
                    {
                        showVideo ?
                            <TouchableOpacity onPress={() => {
                                     this.playVideo(introduce.video);
                                }}>
                                <Image
                                    source={require('../../Image/icon_play_video.png')}
                                    style={styles.icon30}/>
                            </TouchableOpacity> : null
                    }
                    {
                        showLive ?
                            <TouchableOpacity onPress={() => {
                                    this.playVideo(introduce.monitoring);

                                }}>
                                <Image
                                    source={require('../../Image/icon_live_rsmp.png')}
                                    style={[styles.icon30,{marginTop:8}]}/>
                            </TouchableOpacity> : null
                    }
                    {
                        show720 ?
                            <TouchableOpacity onPress={() => {
                                    this.props.navigator.push({
                                        id: 'PanoramaPage',
                                        component: PanoramaPage,
                                         passProps: {
                                              url:introduce.panorama
                                        },
                                    });
                                }}>
                                <Image
                                    source={require('../../Image/icon_play_720.png')}
                                    style={[styles.icon30,{marginTop:8}]}/>
                            </TouchableOpacity> : null
                    }
                </View>
                {
                    introduce ?
                        <View
                            style={{width:Global.Const.size.width,height:40,backgroundColor:'rgba(0, 0, 0, 0.5)', position: 'absolute',bottom:120,left:0,alignItems:'center',flexDirection:'row',padding:10}}>
                            <Text numberOfLines={1}
                                  style={styles.vpTitle}>{introduce.title}</Text>
                            <Text numberOfLines={1}
                                  style={styles.vpSubtitle}>{introduce.subtitle}</Text>
                            <Text
                                style={{  fontSize: 13, color: 'white',textAlign: 'right',right: 25,top:8, position: 'absolute'}}>{size + '张'}</Text>
                        </View>
                        : null
                }
                {
                    Component ? <Component {...this.props}/> : null
                }
            </View>
        )
    }
}

Foreground.propTypes = {
    height: PropTypes.number.isRequired,
    introduce: PropTypes.object,
    Component: PropTypes.func,
    size: PropTypes.number,
    renderHeader: PropTypes.func.isRequired,
};

export default Foreground;